import React from  'react'
import './index.scss'
import Block from '../../components/block'
import {Radio,Input,DatePicker, Space,Button,Table,Checkbox} from 'antd'
import '../../assets/js/font_y03qw1hlhci/iconfont.css'
export default function Home(props){
    const{history} =props
    
    const { RangePicker } = DatePicker;
    const data = [
        {
          key: '1',
          emid: 'John Brown',
          mac: 32,
          ip: 'New York No. 1 Lake Park',
          net:1,
          node:2,
        },
        {
            key: '2',
            emid: 'John Brown',
            mac: 32,
            ip: 'New York No. 1 Lake Park',
            net:1,
            node:2,
        },
        {
            key: '3',
            emid: 'John Brown',
            mac: 32,
            ip: 'New York No. 1 Lake Park',
            net:1,
            node:2,
        },
        {
            key: '4',
            emid: 'John Brown',
            mac: 32,
            ip: 'New York No. 1 Lake Park',
            net:1,
            node:2,
        },
        {
            key: '5',
            emid: 'John Brown',
            mac: 32,
            ip: 'New York No. 1 Lake Park',
            net:1,
            node:2,
        },
        {
            key: '6',
            emid: 'John Brown',
            mac: 32,
            ip: 'New York No. 1 Lake Park',
            net:1,
            node:2,
        },
        {
            key: '7',
            emid: 'John Brown',
            mac: 32,
            ip: 'New York No. 1 Lake Park',
            net:1,
            node:2,
        },
        {
            key: '8',
            emid: 'John Brown',
            mac: 32,
            ip: 'New York No. 1 Lake Park',
            net:1,
            node:2,
        },
        {
            key: '9',
            emid: 'John Brown',
            mac: 767,
            ip: 'New York No. 1 Lake Park',
            net:1,
            node:2,
        },
        {
            key: '10',
            emid: 'John Brown',
            mac: 32421,
            ip: 'New York No. 1 Lake Park',
            net:1,
            node:2,
        },
        {
            key: '11',
            emid: 'John Brown',
            mac: 3,
            ip: 'New York No. 1 Lake Park',
            net:1,
            node:2,
        },
        {
            key: '12',
            emid: 'John Brown',
            mac: 311,
            ip: 'New York No. 1 Lake Park',
            net:1,
            node:2,
        }  
      ];
    function ToNodeUnfold(){
        history.push({
         pathname:'/NodeUnfold'
        })
     }
    
    function getPageData(e){ //获取对应页码的数据
      console.log(e)
    } 

      const getColumnSearchProps = dataIndex => ({
        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
          <div style={{ padding: 8 }} className='nodeStatus'>
                <div className='nodeStatus_net'>
                  <Checkbox >正常</Checkbox>
                  <Checkbox >异常</Checkbox>
                </div>
                <div className='nodeStatus_action'>
                    <span onClick={() => {}} size="small" >
                        重置
                    </span>
                    <span size="small" onClick={ToNodeUnfold} className='confirm'>
                        确定
                    </span>
                </div>
          </div>
        ),
        filterIcon: filtered => <span className="iconfont icon-shaixuan"></span>,
        onFilter: (value, record) =>
          record[dataIndex]
            ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
            : '',
        onFilterDropdownVisibleChange: visible => {
          if (visible) {
            
          }
        }
      });
   
      
    
     
    const columns = [
        {
          title: 'EMID',
          dataIndex: 'emid',
          key: 'emid',
          width: '30%',
         
        },
        {
          title: 'MAC地址',
          dataIndex: 'mac',
          key: 'mac',
          width: '20%',
        },
        {
          title: '公司IP',
          dataIndex: 'ip',
          key: 'ip'
        },
        {
            title: '联网状态',
            dataIndex: 'net',
            key: 'net',
            ...getColumnSearchProps('net'),
        },
        {
            title: '节点状态',
            dataIndex: 'node',
            key: 'noe',
            ...getColumnSearchProps('node'),
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            render:()=>(<span>我是操作</span>)
        },
      ];
    return(
        <div className='node'>
            <div className='node_top'>
                <Block title='节点数量' count='2000' type={0} width={220} height={110}></Block>
                <Block title='在线数量' count='2000' type={0} width={220} height={110}></Block>
                <Block title='离线数量' count='2000' type={1} width={220} height={110}></Block>
                <Block title='正常数量' count='2000' type={0} width={220} height={110}></Block>
                <Block title='异常数量' count='2000' type={2} width={220} height={110}></Block>
            </div>
            <div>
                <p className='node_title'>
                    <span>节点管理</span>
                    <span>如何增加节点？</span>
                </p>
                <div className='node_select'>
                   <div className='select_le'>
                       <div className='net'>
                           <span className='selectItme_le'> 联网状态</span>
                           <Radio.Group defaultValue="a" buttonStyle="solid" size='large' >
                                <Radio.Button value="a">全部</Radio.Button>
                                <Radio.Button value="b">在线</Radio.Button>
                                <Radio.Button value="c">离线</Radio.Button>
                           </Radio.Group>
                       </div>
                       <div className='emid'>
                          <span className='selectItme_le'>EMID &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                          <Input style={{width:'200px',height:'40px'}} />
                       </div>
                   </div>

                   <div className='select_ce'>
                       <div className='net'>
                           <span className='selectItme_le'>节点状态</span>
                           <Radio.Group  defaultValue="a" size='large'  buttonStyle="solid" >
                                <Radio.Button value="a">全部</Radio.Button>
                                <Radio.Button value="b">正常</Radio.Button>
                                <Radio.Button value="c">异常</Radio.Button>
                           </Radio.Group>
                       </div>
                       <div className='time'>
                          <span className='selectItme_le'>入网时间</span>
                          <Space direction="vertical" size={12}>
                            <RangePicker style={{flex:1}} size='large'/>
                         </Space>
                       </div>
                   </div>

                   <div className='select_ri'>
                      <Button type="primary" style={{width:'150px',marginRight:'10px',height:'40px'}}>查询</Button>
                      <Button type="default" style={{width:'150px',height:'40px'}}>重置</Button>
                   </div>
                </div>

                <div className='list'>
                  <Table 
                  pagination={{
                    total:49,
                    defaultCurrent:2,
                    pageSize:8,
                    hideOnSinglePage:true,
                  }} 
                  onChange={getPageData}
                  columns={columns} dataSource={data} />
                </div>
            </div>
        </div>
    )
}